<template>

    <div id="detailNote">
        <header class="mui-bar mui-bar-nav">
            <router-link tag="a" to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></router-link>
            <h1 class="mui-title">日记</h1>
        </header>
        <div class="mui-content" style="background-color: #fff;padding-left:10px;padding-right:10px;">
            <div>
                <input readonly="readonly" v-model="note.title" style="height: 40px;width:100%;font-size: 16px;border: none;display: inline-block;"></input>
                <span class="note-date" style="color: #ccc;font-size: 12px;display: inline-block;">{{note.date}}</span>
            </div>
            <div class="ch-img" v-for="(img,index) in note.imgs">
                <img :src="img" style="max-width: 200px;max-height: 343px;border:2px solid #fff;">
            </div>
            <div id="content" style="-webkit-user-select:text;height: auto;min-height: 300px;">{{note.body}}</div>
        </div>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item " id="defaultTab">
                <span class="mui-icon mui-icon-compose"></span>
                <span class="mui-tab-label">编辑</span>
            </a>
            <div @click="delNote" class="mui-tab-item">
                <span class="mui-icon mui-icon-trash"></span>
                <span class="mui-tab-label">删除</span>
            </div>
        </nav>


    </div>
</template>

<script>

    export default {
        name: "detailNote",
        data() {
            return {
                note: {},
                noteId: '',
            }
        },
        methods: {
            goEdit: function () {

            }
            ,
            goHistory: function () {
                this.$router.go('/home');
            },
            delNote: function () {
                var btnArray = ['否', '是'];
                var _this = this;
                var curId = this.noteId;
                this.mui.confirm('确定删除当前笔记？', '删除', btnArray, function (e) {
                    if (e.index == 1) {
                        var data = localStorage.getItem('note');
                        var userId = sessionStorage.getItem('userId');
                        var noteData = JSON.parse(data);
                        if (noteData) {
                            if (noteData.length == 1) {
                                localStorage.removeItem('note');
                            } else {
                                var newNotes = [];
                                for (let i = 0; i < noteData.length; i++) {
                                    const data = noteData[i];
                                    var id = data.id;
                                    var _userId = data.userId;
                                    if (id != curId) {
                                        newNotes.push(data);
                                    }
                                }
                                localStorage.removeItem('note');
                                localStorage.setItem('note', JSON.stringify(newNotes));
                            }
                        }
                    }
                    _this.mui.toast('删除成功', { duration: 'long', type: 'div' });
                    _this.$router.go('/home');
                })
            }      
    },
    created: function () {
        this.mui('body').on('tap', 'a', function () { document.location.href = this.href; });
        this.mui('body').on('click', 'a', function () { document.location.href = this.href; });
        this.note = this.$route.query.note;
        this.noteId = this.note.id;
    },

    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    header {
        background-color: #51a2e2;
    }

    header h1,
    a {
        color: #fff;
    }
</style>